<template>
  <div>
    <Appheader></Appheader>
    <div class="querenBuy" v-loading="loading">
      <div v-if="showAddr==true">
        <div class="querenBuy_a flex">
          <p>确认收货地址</p>
          <p @click="goaddr()">管理收货地址</p>
        </div>
        <div
          class="addressList flex"
          v-for="(addlist,addindex) in addressList"
          :key="addindex"
          :class="chosse_index==addindex?'border_C':''"
          @click="choose_addl(addlist,addindex)"
        >
          <div class="choose_address flex">
            <div class="add_item flex" v-if="chosse_index==addindex">
              <img src="../assets/loc.png" alt />
              寄送至
            </div>
            <div class="ressList flex" :class="chosse_index!=addindex?'margin_l':''">
              <div class="flex">
                <img
                  src="../assets/choose_address.png"
                  alt
                  class="address_c"
                  v-if="chosse_index==addindex"
                />
                <p class="cycle" v-if="chosse_index!=addindex"></p>
              </div>
              <p class="ressList_a hidden" :class="chosse_index==addindex?'font_bold':''">
                {{addlist.addr}}（{{addlist.name}}&nbsp;&nbsp;收）&nbsp;
                {{addlist.phone}}
              </p>
              <p class="ressList_b font_bold" v-if="addlist.isdefault=='1'">默认地址</p>
            </div>
          </div>
          <div class="amend_address" v-if="chosse_index==addindex" @click="amend(addlist)">修改本地址</div>
        </div>
        <div class="add_Address" @click="add_addr">添加新地址</div>
      </div>
      <div class="querenBuy_a flex">
        <p>确认订单信息</p>
        <p></p>
      </div>
      <div class="order_detail">
        <div class="order_calssify flex">
          <p>商品</p>
          <p>单价</p>
          <p>数量</p>
          <p>小计</p>
        </div>
        <div class="order_ad" v-for="(list,index) in order_array" :key="index">
          <div class="order_con flex">
            <div class="order_con_a flex">
              <img :src="list.photo" alt />
              <div class="con_a_title">{{list.title}}</div>
            </div>
            <div class="order_con_b">{{list.price}}</div>
            <div class="order_con_b" v-if="list.type=='3'">x{{list.num}}</div>
            <div class="order_con_b" v-else>x1</div>
            <div class="order_con_d">{{list.allP}}</div>
          </div>
        </div>
        <div class="order_q">
          <div class="price flex">
            <div class="flex" @click="topay()">
              <div class="cy_1 flex">
                <div class="cy_2" v-show="is_c_ty"></div>
              </div>
              <img src="../assets/wx.png" alt />
              微信支付
            </div>
            <div class="flex" @click="topay()">
              <div class="cy_1 flex">
                <div class="cy_2" v-show="!is_c_ty"></div>
              </div>
              <img src="../assets/zfb.png" alt />
              支付宝支付
            </div>
          </div>
          <div class="queren_price">
            <div class="alone_price flex" style="margin-top:16px;margin-right:52px;">
              总价：¥{{zprice}}&nbsp;&nbsp;&nbsp;&nbsp;
              <p v-if="jianmian!=0">促销满减：-¥{{jianmian}}</p>
            </div>
            <div class="alone_price flex" style="margin-top:16px;margin-right:52px;">
              实付款：
              <span>¥{{all_p}}</span>
            </div>
            <div class="go_address" v-if="showAddr==true">寄送至：{{addritem}}</div>
            <div
              class="get_add_name"
              v-if="showAddr==true"
            >收货人：{{addrname}}&nbsp;&nbsp;{{addrphone}}</div>
          </div>
          <button class="submit_order" @click="submit_order" :disabled="isdisabled">提交订单</button>
        </div>
      </div>
    </div>
    <div class="modal_amend">
      <el-dialog :visible.sync="modelAmend" width="680px" :title="istitle">
        <div class="amend_con">
          <div class="amend_name">
            <p class="amens_p">收货人:</p>
            <input type="text" v-model="s_name" />
          </div>
          <div class="amend_name">
            <p class="amens_p">手机号码:</p>
            <input type="text" v-model="s_phone" />
          </div>
          <div class="amend_detailaera">
            <p class="amens_p">详细地址:</p>
            <input type="text" v-model="d_address" />
          </div>
          <div class="amend_detailaera flex" style="margin-top:15px;" @click="moren">
            <p class="amens_p" style="margin-bottom:0px;">设置为默认地址:</p>
            <img
              src="../assets/huiguanbi.png"
              alt
              style="width: 40px;margin-left:15px;"
              v-show="ismoren"
            />
            <img
              src="../assets/gongdakai1.png"
              alt
              style="width: 45px;margin-left:15px;"
              v-show="!ismoren"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="amendSure()">保存收货地址</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="modal_pay">
      <el-dialog
        :visible.sync="modelPay"
        width="500px"
        title="微信扫码支付"
        :show-close="false"
        :close-on-click-modal="false"
        center
      >
        <div>
          <img :src="code_url" alt id="code" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="paySure()">确定</el-button>
        </span>
      </el-dialog>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "./header";
import Appfooter from "./footer";
import {
  ykUserAddr,
  addAddr,
  editAddr,
  ykGoodscourses,
  ykOrderappOrder,
  ykOrderinfo
} from "../api/index.js";
export default {
  props: {},
  data() {
    return {
      modelPay: false,
      addressList: [],
      chosse_index: 0,
      addritem: "",
      addrname: "",
      addrphone: "",
      loading: true,
      modelAmend: false, //修改弹窗
      d_address: "", //详细地址
      s_name: "", //收货人
      s_phone: "", //收货手机号
      isaddr: "", //0 是添加 1是修改
      editid: "", //修改的id
      istitle: "",
      userid: "",
      order: "",
      order_array: [],
      all_p: 0,
      is_c_ty: true,
      c_type_pay: 0,
      isdisabled: false,
      htmls: "",
      code_url: "",
      order_id: "",
      ismoren: true, //是否是默认地址
      showAddr: false,
      buynum: 1,
      jianmian: 0,
      zprice: 0
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.userid = localStorage.getItem("YKuserid");
    this.order = this.$route.params.order || sessionStorage.getItem("c_order");
    this.buynum =
      this.$route.params.buynum || sessionStorage.getItem("c_buynum");
    sessionStorage.setItem("c_order", this.order);
    sessionStorage.setItem("c_buynum", this.buynum);
    this.postAddr();
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        goodsIds: this.order,
        nums: this.buynum
      };
      ykGoodscourses(this.qs(msg))
        .then(res => {
          let aa = [],
            jianPrice = 0;
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.courses.length; i++) {
              res.data.courses[i].allP = Number(
                res.data.courses[i].price * res.data.courses[i].num || 1
              );
              if (
                res.data.courses[i].preferential &&
                res.data.courses[i].preman <= res.data.courses[i].allP
              ) {
                jianPrice += Number(res.data.courses[i].premoney);
              }
              res.data.courses[i].allP = res.data.courses[i].allP.toFixed(2);
              this.all_p += Number(res.data.courses[i].allP);
              aa.push(res.data.courses[i].type);
            }
            this.order_array = res.data.courses;
            this.zprice = this.all_p.toFixed(2);
            this.all_p = Number(this.all_p - jianPrice).toFixed(2);
            this.jianmian = jianPrice;
          }
          if (aa.indexOf("3") != -1) {
            this.showAddr = true;
          } else {
            this.showAddr = false;
          }
        })
        .catch(e => {});
    },
    postAddr() {
      let msg = {
        userId: this.userid
      };
      ykUserAddr(this.qs(msg))
        .then(res => {
          // console.log(res);
          this.addressList = res.data.rows;
          this.loading = false;
          for (let i = 0; i < res.data.rows.length; i++) {
            if (res.data.rows[i].isdefault == "1") {
              this.chosse_index = i;
              this.addritem = res.data.rows[i].addr;
              this.addrname = res.data.rows[i].name;
              this.addrphone = res.data.rows[i].phone;
              return;
            }
          }
          this.chosse_index = 0;
          this.addritem = res.data.rows[0].addr;
          this.addrname = res.data.rows[0].name;
          this.addrphone = res.data.rows[0].phone;
        })
        .catch(e => {});
    },
    choose_addl(item, index) {
      this.chosse_index = index;
      this.addritem = item.addr;
      this.addrname = item.name;
      this.addrphone = item.phone;
    },
    //修改
    amend(item) {
      this.modelAmend = true;
      this.isaddr = "1";
      this.d_address = item.addr;
      this.s_name = item.name;
      this.s_phone = item.phone;
      this.editid = item.id;
      this.istitle = "编辑收货地址";
      if (item.isdefault == "0") {
        this.ismoren = true;
      } else {
        this.ismoren = false;
      }
    },
    amendSure() {
      var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (this.s_name && this.s_phone && this.d_address) {
        if (!reg.test(this.s_phone)) {
          this.$message({
            type: "error",
            message: "手机号格式不正确"
          });
          return;
        }
        let isde;
        if (this.ismoren == true) {
          isde = 0;
        } else if (this.ismoren == false) {
          isde = 1;
        }
        let addmsg = {
          name: this.s_name,
          phone: this.s_phone,
          addr: this.d_address,
          isdefault: isde,
          userId: this.userid,
          id: this.editid || ""
        };
        if (this.isaddr == "0") {
          //添加地址
          addAddr(this.qs(addmsg))
            .then(res => {
              // this.$message({
              //   type: "info",
              //   message: res.data.msg
              // });
              if (res.data.code == 0) {
                this.postAddr();
              }
              this.modelAmend = false;
            })
            .catch(e => {});
        } else if (this.isaddr == "1") {
          editAddr(this.qs(addmsg))
            .then(res => {
              // this.$message({
              //   type: "info",
              //   message: res.data.msg
              // });
              if (res.data.code == 0) {
                this.postAddr();
              }
              this.modelAmend = false;
            })
            .catch(e => {});
        }
        this.d_address = "";
        this.s_name = "";
        this.s_phone = "";
      } else {
        this.$message({
          type: "error",
          message: "所有内容不能为空"
        });
      }
    },
    //新增收货地址
    add_addr() {
      this.modelAmend = true;
      this.isaddr = "0";
      this.istitle = "添加收货地址";
      this.d_address = "";
      this.s_name = "";
      this.s_phone = "";
      this.ismoren = true;
    },
    goaddr() {
      this.$router.push({
        name: "ykUserAddr"
      });
    },
    submit_order() {
      let that = this,
        orderlist = [];
      this.isdisabled = true;
      if (this.showAddr == true) {
        if (!this.addrname) {
          this.$message({
            type: "error",
            message: "请选择收货地址"
          });
          this.isdisabled = false;
          return;
        }
      }
      for (let i = 0; i < this.order_array.length; i++) {
        orderlist.push({
          goodsId: this.order_array[i].id,
          num: this.order_array[i].num
        });
      }
      let msg = {
        ykordergoods: JSON.stringify(orderlist),
        userId: this.userid,
        payMoney: this.all_p,
        payType: this.c_type_pay,
        username: this.addrname,
        useraddr: this.addritem,
        userphone: this.addrphone
      };
      ykOrderappOrder(this.qs(msg))
        .then(res => {
          // this.$message({
          //   type: "info",
          //   message: res.data.msg
          // });
          if (res.data.msg == "成功" && this.c_type_pay == 0) {
            that.modelPay = true;
            that.code_url =
              "http://www.yclearn.com.cn/YK/api/ykOrder/getQRCode?code_url=" +
              res.data.code_url;
            that.order_id = res.data.ykOrder.id;
          }
          if (res.data.code == 0 && this.c_type_pay == 1) {
            if (this.all_p > 0) {
              let routerData = this.$router.resolve({
                path: "/payGateWay",
                query: { htmls: res.data.result }
              });
              this.htmls = res.data.result; //打开新页面
              window.open(routerData.href, "_blank");
              const div = document.createElement("div");
              div.innerHTML = htmls;
              document.body.appendChild(div);
              document.forms[0].submit();
            }
          }
          if (res.data.msg == "操作成功" && this.all_p == 0.0) {
            this.$router.push({
              name: "zhifuSuccess"
            });
          }
          this.isdisabled = false;
        })
        .catch(e => {
          this.isdisabled = false;
        });
    },
    topay() {
      this.is_c_ty = !this.is_c_ty;
      if (this.is_c_ty == true) {
        this.c_type_pay = 0;
      } else {
        this.c_type_pay = 1;
      }
    },
    paySure() {
      let msg = {
        id: this.order_id
      };
      ykOrderinfo(this.qs(msg))
        .then(res => {
          this.modelPay = false;
          if (res.data.ykOrder.payStatus == "0") {
            this.$message({
              type: "error",
              message: "未支付"
            });
          } else {
            this.$router.push({
              name: "zhifuSuccess"
            });
          }
        })
        .catch(e => {});
    },
    moren() {
      this.ismoren = !this.ismoren;
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.querenBuy {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 102px;
  margin-top: 36px;
  background: #35373f;
}
.querenBuy_a {
  width: 1032px;
  margin: 0 auto;
  justify-content: space-between;
  padding-top: 15px;
  margin-bottom: 9px;
}
.querenBuy_a > p:first-child {
  font-size: 16px;
  font-weight: bold;
  color: #c9a650;
}
.querenBuy_a > p:last-child {
  font-size: 14px;
  color: #245ef8;
  cursor: pointer;
}
.addressList {
  width: 980px;
  height: 40px;
  margin-left: 152px;
  cursor: pointer;
}

.border_C {
  background: rgba(254, 239, 231, 1);
  border: 1px solid rgba(216, 20, 23, 1);
}
.cycle {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 50%;
  margin-right: 5px;
}
.address_c {
  width: 17px;
  height: 16px;
  margin-right: 5px;
}

.choose_address {
  width: 91%;
}
.amend_address {
  width: 8%;
  font-size: 14px;
  color: rgba(36, 94, 248, 1);
}
.add_item {
  font-size: 14px;
  color: rgba(216, 20, 23, 1);
  margin-right: 14px;
}
.add_item > img {
  width: 15px;
  height: 18px;
  margin-right: 6px;
  margin-left: 20px;
}
.ressList_a,
.ressList_b {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}
.font_bold {
  font-weight: bold;
}
.ressList_b {
  margin-left: 6px;
}
.margin_l {
  margin-left: 99px;
}
.add_Address {
  width: 101px;
  height: 34px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(153, 153, 153, 1);
  line-height: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-left: 262px;
  margin-top: 10px;
  cursor: pointer;
}
/* order_detail */
.order_detail {
  width: 980px;
  margin: 0 auto;
  overflow: hidden;
}
.order_con,
.order_calssify {
  justify-content: space-around;
}
.order_calssify > p {
  width: 150px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  text-align: center;
}
.order_calssify > p:nth-child(1) {
  width: 317px !important;
}
.order_con_a > img {
  width: 72px;
  height: auto;
}
.con_a_title {
  width: 228px;
  font-size: 14px;
  font-weight: 400;
  color: #dfd4d4;
  margin-left: 15px;
}
.order_con_b {
  width: 150px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #dfd4d4;
}
.order_con_d {
  width: 150px;
  text-align: center;
  font-size: 18px;
  color: #c9a650;
}
.alone_price {
  font-size: 14px;
  color: #dfd4d4;
  margin-top: 45px;
  justify-content: flex-end;
  margin-right: 68px;
}
.alone_price > span {
  font-size: 18px;
  color: #c9a650;
}
.order_ad {
  margin-top: 5px;
  padding: 22px 0;
  background: #5a5960;
  margin-bottom: 20px;
}
.order_q {
  float: right;
  overflow: hidden;
  margin-top: 8px;
}
.queren_price {
  width: 466px;
  background: #5a5960;
  overflow: hidden;
  padding-bottom: 10px;
}
.go_address,
.get_add_name {
  font-size: 14px;
  font-weight: 400;
  color: #dfd4d4;
}
.go_address {
  margin-top: 6px;
  margin-left: 12px;
}
.get_add_name {
  float: right;
  margin-right: 52px;
}
.submit_order {
  width: 143px;
  height: 38px;
  background: #c9a650;
  font-size: 16px;
  color: #25272f;
  line-height: 38px;
  text-align: center;
  float: right;
  cursor: pointer;
  border: none;
}
.modal_amend >>> .el-dialog {
  border-radius: 10px !important;
  margin-top: 297px !important;
}
.modal_amend >>> .el-dialog__header {
  height: 38px;
  background: rgba(253, 224, 225, 1);
  border-radius: 10px 10px 0px 0px;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.modal_amend >>> .el-dialog__header {
  margin-bottom: 10px;
}
.modal_amend >>> .el-dialog__headerbtn {
  top: 10px !important;
}
.modal_amend >>> .el-dialog__title {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
  margin-left: 18px;
}
.modal_amend >>> .el-dialog__footer {
  padding: 0px 0px 58px 61px !important;
}
.modal_amend >>> .dialog-footer {
  display: block !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}
.modal_amend >>> .dialog-footer > button {
  height: 40px !important;
  border-radius: 3px !important;
  color: rgba(51, 51, 51, 1) !important;
  background-color: rgba(237, 237, 237, 1) !important;
  border-color: rgba(153, 153, 153, 1) !important;
  font-size: 16px !important;
}
.modal_amend >>> .dialog-footer > button {
  width: 145px !important;
}
.modal_amend >>> .el-dialog__body {
  padding: 23px 61px !important;
}
.amens_p {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 13px;
}
.amend_name > input,
.amend_detailaera > input {
  height: 40px;
  border: 1px solid rgba(153, 153, 153, 1);
  background: #fff;
  padding-left: 10px;
  font-size: 14px;
  color: #333;
}
.amend_name > input {
  width: 247px;
  margin-bottom: 15px;
}
.amend_detailaera > input {
  width: 461px;
}
.price {
  margin-bottom: 20px;
  cursor: pointer;
  color: #dfd4d4;
}
.price > .flex:nth-child(1) > img {
  width: 28px;
  height: 25px;
  margin-right: 13px;
  margin-left: 10px;
}
.price > .flex:nth-child(2) > img {
  width: 29px;
  height: 29px;
  margin-right: 13px;
  margin-left: 10px;
}
.cy_1 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid#c9a650;
  justify-content: center;
  margin-left: 15px;
}
.cy_2 {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c9a650;
}
.pay_con >>> from {
  height: 100%;
}
#code {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.modal_pay >>> .el-button--primary {
  border-color: #d81417;
  background-color: #d81417;
}
</style>
